<template>
  <view class="container">
    <view class="common_cell">
      <u-cell-group :border="false">
        <u-cell :border="false" title="低温报警值">
          <view slot="value">
            <u-input inputAlign="right" placeholder="请输入低温报警值" border="none" v-model="lowTemperature">
              <view slot="suffix"> ℃ </view>
            </u-input>
          </view>
        </u-cell>
        <u-cell :border="false" title="高温报警值">
          <view slot="value">
            <u-input inputAlign="right" placeholder="请输入高温报警值" border="none" v-model="highTemperature">
              <view slot="suffix"> ℃ </view>
            </u-input>
          </view>
        </u-cell>
      </u-cell-group>
    </view>

    <view class="warning_phone">接收报警手机号</view>

    <view class="common_cell" v-for="(item, index) in phones" :key="index">
      <u-cell :title="'手机号' + (index + 1)">
        <u--input inputAlign="right" @change="changePhone(index, $event)" slot="value" border="none" :value="item"
          placeholder="请输入手机号"></u--input>
      </u-cell>
    </view>

    <view class="common_cell add_phone">
      <u-icon name="plus-circle-fill" color="rgba(186, 186, 186, 1)" size="25"></u-icon>
      <text class="add_phone_desc" @click="addPhone">添加手机号</text>
    </view>

    <!-- <view class="common_cell">
      <u-cell :border="false" title="微信报警开关（免费）">
        <u-switch slot="right-icon" v-model="wxAlert" />
      </u-cell>
    </view> -->

    <view class="common_cell">
      <u-cell :border="false" title="短信报警开关">
        <u-switch slot="right-icon" v-model="smsAlert" />
      </u-cell>
    </view>

    <!-- 电话报警开关 -->
    <view class="common_cell">
      <u-cell :border="false" title="电话报警开关">
        <u-switch slot="right-icon" v-model="phoneAlert" />
      </u-cell>
    </view>

    <!-- 可用短信数 -->
    <view class="common_cell">
      <u-cell :border="false" title="可用短信数">
        <view slot="value" class="common_cell_value">
          <text class="sms_num">{{ userInfo.smsCount }}</text>
          <view class="sms_unit_btn" @click="toRecharge(0)">充值</view>
        </view>
      </u-cell>
    </view>

    <view class="common_cell">
      <u-cell :border="false" title="可用电话数">
        <view slot="value" class="common_cell_value">
          <text class="sms_num">{{ userInfo.callMinutes }}</text>
          <view class="sms_unit_btn" @click="toRecharge(1)">充值</view>
        </view>
      </u-cell>
    </view>

    <view class="common_cell">
      <u-cell-group :border="false" class="common_cell">
        <u-cell :border="false" title="报警时段">
          <view slot="value" class="warning_time_type">
            <u-radio-group placement="row" v-model="warnTimeType">
              <u-radio name="day" shape="circle" label="全天"></u-radio>
              <u-radio name="time" shape="circle" label="指定时段"></u-radio>
            </u-radio-group>
          </view>
        </u-cell>

        <u-cell v-if="warnTimeType === 'time'" title="开始时间" :value="alertTimeStart"
          @click="this.$refs.startTimePicker.show = true" />
        <u-cell v-if="warnTimeType === 'time'" :border="false" title="结束时间" :value="alertTimeEnd"
          @click="this.$refs.stopTimePicker.show = true" />
      </u-cell-group>
    </view>

    <!-- 预约到期时间 -->
    <commonDateTimePicker ref="startTimePicker" @confirm="startTimePickerConfirm" mode="time" />

    <!-- 结束时间弹窗 -->
    <commonDateTimePicker ref="stopTimePicker" @confirm="stopTimePickerConfirm" mode="time" />

    <!-- 保存设置 -->
    <view class="common_save_button2" style="margin-top: 40rpx" @click="submit">保存设置 </view>
  </view>
</template>

<script>
import commonDateTimePicker from "@/components/common-datetime-picker/index.vue";
import { getDeviceWarning, getUserInfo, setDeviceWarning } from "../../../api";
export default {
  components: {
    commonDateTimePicker,
  },
  data() {
    return {
      // 页面参数
      options: {},
      checked: false,
      phones: [],
      //   是否微信报警开关
      wxAlert: false,
      //   短信报警开关
      smsAlert: false,

      //   是否电话报警开关
      phoneAlert: false,

      //   报警时段类型
      warnTimeType: [],

      alertTimeStart: "",
      alertTimeEnd: "",

      // 低温报警值
      lowTemperature: "",

      // 高温报警值
      highTemperature: "",

      warningConfig: {},
      id: "",
      userInfo: {}
    };
  },

  /**
   * 生命周期函数--监听页面加载
   */
  async onLoad(options) {
    this.id = options.id;

    this.getInfo(options.id);



  },

  /**
   * 生命周期函数--监听页面显示
   */
  async onShow() {
    try {
      const _Res = await getUserInfo();

      console.log('_Res_Res', _Res);
      this.userInfo = _Res;

    } catch (error) {

    }
  },

  methods: {
    async getInfo(id) {
      try {
        const _res = await getDeviceWarning({
          id: id
        })

        console.log('_res', _res);

        this.lowTemperature = _res.lowTemperature;
        this.highTemperature = _res.highTemperature;
        this.wxAlert = _res.wxAlert;
        this.smsAlert = _res.smsAlert;
        this.phoneAlert = _res.phoneAlert;

        this.phones = _res.alertPhone.split(',');

        this.warningConfig = _res;

        if (_res?.alertTimeStart === "00:00" && _res?.alertTimeEnd === "23:59") {
          this.warnTimeType = "day";
        } else {
          this.warnTimeType = "time";
          this.alertTimeStart = _res.alertTimeStart;

          this.alertTimeEnd = _res.alertTimeEnd;
        }
      } catch (error) {

      }
    },
    addPhone() {
      this.phones.push("");
    },
    changePhone(index, event) {
      console.log('index', {
        index,
        event: event
      });

      this.phones[index] = event;
    },
    toRecharge(type) {
      uni.navigateTo({
        url: `/pages/index/recharge/index?type=${type}`,
      });
    },
    startTimePickerConfirm(_val) {
      console.log('_val', _val);

      this.alertTimeStart = _val;
    },
    stopTimePickerConfirm(_val) {
      this.alertTimeEnd = _val;
    },
    async submit() {
      console.log('点击保存', this.phones);

      if (this.phones.length === 0 && this.phoneAlert) {
        return uni.showToast({
          title: "请填写手机号",
          icon: "none",
        });
      }

      try {
        uni.showLoading({
          title: "保存中...",
        });
        await setDeviceWarning({
          deviceId: this.id,
          lowTemperature: this.lowTemperature,
          highTemperature: this.highTemperature,
          wxAlert: this.wxAlert,
          smsAlert: this.smsAlert,
          phoneAlert: this.phoneAlert,
          alertTimeStart: this.warnTimeType === "day" ? "00:00" : this.alertTimeStart,
          alertTimeEnd: this.warnTimeType === "day" ? "23:59" : this.alertTimeEnd,
          alertPhone: this.phones
          // phones: this.phones.join(",")
        });

        // 返回上一页
        uni.navigateBack();
      } catch (error) {
        console.log('error', error);

      }
    }
  },
};
</script>

<style lang="scss" scoped>
uni-page-body {
  height: 100%;
}

page {
  height: 100%;
}

.container {
  background: #f6f7fb;
  height: 100%;

  padding: 0 25.568rpx 25.568rpx 25.568rpx;

  ::v-deep .u-cell__body {
    padding-left: 0px;
    padding-right: 0px;
  }

  .warning_phone {
    margin-top: 34.091rpx;
    margin-bottom: 34.091rpx;
    margin-left: 34.091rpx;
    font-family: "Microsoft YaHei";
    font-size: 30.682rpx;
    font-weight: 290;
    line-height: 40.807rpx;
    text-align: left;
  }

  .add_phone {
    padding-top: 10px;
    padding-bottom: 10px;

    color: rgba(159, 159, 159, 1);
    font-family: "Microsoft YaHei";
    font-size: 25.568rpx;
    font-weight: 700;
    line-height: 33.75rpx;

    display: flex;
    justify-content: center;
    align-items: center;

    .add_phone_desc {
      margin-left: 10.227rpx;
    }
  }
}

.common_cell_value {
  display: flex;
  align-items: center;

  .sms_num {
    font-family: "Microsoft YaHei";
    font-size: 25.568rpx;
    font-weight: 700;
    line-height: 33.75rpx;
    text-align: right;
    color: rgba(30, 31, 35, 1);
  }

  .sms_unit_btn {
    width: 81.818rpx;
    height: 44.318rpx;
    border-radius: 8.523rpx;

    font-family: "Microsoft YaHei";
    font-size: 23.864rpx;
    font-weight: 290;
    line-height: 31.739rpx;
    text-align: right;

    color: rgba(255, 255, 255, 1);
    background: rgba(37, 135, 255, 1);

    margin-left: 27.273rpx;

    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.warning_time_type {
  width: 50%;

  ::v-deep .u-radio-group {
    justify-content: space-between;
  }
}
</style>